<template>
    <div class="root">
        <!-- 搜索框 -->
        <form action="/" class="search-ipt">
            <van-search v-model.trim="value" shape="round" show-action placeholder="商品搜索" @input="ipt" @cancel="onCancel" @search="onSearch"/>
        </form>
        <!-- 分割线 -->
        <van-divider class="br"/>
        <!-- 第一部分 -->
        <div class="search" v-if="current==1">
            <!-- 分割线 -->
            <van-divider class="br"/>
            <!-- 历史搜索记录 -->
            <div class="history" v-if="isshow">
                <div class="history-title">
                    <p class="title">历史记录</p>
                    <img src="@/assets/imgs/icons/回收站.png" alt="" class="del-icon" @click="delHistory">
                </div>
                <div class="history-list">
                    <p v-for="item in historyList" :key="item.id" class="list-item" @click="goadd({'id':item.id,'value':item.keyword})">
                        {{ item.keyword }}
                    </p>
                </div>
            </div>
            <!-- 热门搜索 -->
            <div class="hot">
                <div class="hot-title">
                    <p class="title">热门搜索</p>
                </div>
                <div class="hot-list" >
                    <p v-for="item in hotKeywordList" :key="item.id" :class="item.is_hot ? 'hot-act':'list-item'">
                        {{ item.keyword }}
                    </p>
                </div>
            </div>
        </div>
        <!-- 第二部分 -->
        <div class="tips" v-else-if="current==2">
            <!-- 搜索提示 -->
            <div class="tips-list" v-for="item in tip" :key="item.id" @click="goadd({'id':item.id,'value':item.name})">
                <p class="tips-title">
                    <span>{{item.name}}</span>
                    <img src="@/assets/imgs/icons/向前.png" alt="" class="go-icon">
                </p>
                <van-divider class="tip-br"/>
            </div>
        </div>
        <!-- 第三部分 -->
        <div class="goodShow" v-else>
            <van-row class="goodShow-title">
                <van-col span="8" :class="index==1 ? 'active' : '' " @click="handle(1)">综合</van-col>
                <van-col span="8" :class="index==2 ? 'active' : '' " @click="handle(2)">价格
                    <van-icon name="arrow-up" :color="flag=='up' ? '#CEA62A' : '#C1C1C1'"/>
                    <van-icon name="arrow-down" :color="flag=='down' ? '#CEA62A' : '#C1C1C1'"/>
                </van-col>
                <van-col span="8" :class="index==3 ? 'active' : '' " @click="handle(3)">分类</van-col>
              </van-row>
            <div class="goods">
                <div v-for="item in productList" :key="item.id" class="goods-item">
                    <img :src="item.list_pic_url" alt="" class="goods-img">
                    <p class="goods-name">{{item.name}}</p>
                    <p class="goods-price">{{item.retail_price}}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {
    indexaction,helperaction,clearhistory,addhistory,detailaction
} from '@/axios/index'
export default {
    name: 'homeSearch',

    data() {
        return {
            value:'',
            historyList:[],
            hotKeywordList:[],
            current:1,
            keyword:"",
            order:'asc',
            tip:[],
            isshow:false,
            productList:[],
            index:1,
            flag:'',
        };
    },
    async created() {
        
        let res=await indexaction({'openId':localStorage.getItem('openId')});
        console.log(res);
        // 获取 搜索历史
        this.historyList=res.historyData;
        if(!this.historyList){
            this.isshow=false
        }else{
            this.isshow=true
        }
        // 获取 热门搜索
        this.hotKeywordList=res.hotKeywordList;
    },
    mounted() {
        
    },
    methods: {
        async ipt(){
            if(!this.value){
                this.current=1
            }else{

                this.current=2
                this.keyword=this.value;
                // 获取搜索提示
                let res = await helperaction({'keyword':this.keyword,'order':this.order});
                this.tip=res.keywords;
                // console.log(this.tip);
            }
        },
        onCancel(){
            this.$router.back()
        },
        onSearch(){
            // 搜索确定
            alert("还未添加此功能")
        },
        delHistory(){
            clearhistory({'openId':localStorage.getItem('openId')});
            this.historyList=[];
            this.isshow=false;
        },
        async goadd(obj){
            // 让第二层关闭,显示第三层
            this.current=3
            // 如果历史记录里没有 添加 搜索历史
            if(!this.historyList.every(el=>el.keyword==obj.value)){
                addhistory({'keyword':obj.value,'openId':localStorage.getItem('openId')});
            }

            // 获取该商品展示
            let res = await detailaction({'id':obj.id,'openId':localStorage.getItem('openId')});
            this.productList = res.productList;
            console.log(this.productList);
        },
        handle(num){
            this.index=num;
            if(num==2){
                if(!this.flag){
                    this.flag='up';
                    
                }else{
                    this.flag='down';
                   
                }
            }else{
                this.flag=''
                
            }
        }
    },
};
</script>

<style scoped lang="scss">
    .root{
        
    }
    .search-ipt{
        margin: 8px 20px 41px;
    }
    .br{
        color:'#E8E8E8';
        margin: 0;
        padding: 0;
    }
    .sesarch{
        //搜索框样式
        .br{
            color:'#E8E8E8';
            margin: 0;
            padding: 0;
        }
        
    }
    .history{
        overflow: hidden;
        margin-bottom: 20px;
        .history-title{
            display: flex;
            justify-content: space-between;
            align-items:center;
            margin: 0 39px;
            margin-top: 42px;
            .title{
                font-size: 26px;
                color: #333333;
                letter-spacing: 0;
                font-weight: 500;
                height: 37px;
                line-height: 37px;
                margin: 0;
                padding: 0;
            }
            .del-icon{
                display: block;
                width: 20px;
                height: 20px;
            }
        }
        .history-list{
            width: 672px;
            margin: 28px auto 35px;
            overflow: hidden;
            .list-item{
                float: left;
                border: 1px solid #E2E2E2;
                padding:12px 19px 10px 23px;
                font-size: 20px;
                color: #666666;
                letter-spacing: 0;
                font-weight: 400;
                height: 50px;
                line-height: 50px;
                margin: 0 10px 12px 0;
            }
        }
    }
    //热门搜索
    .hot{
        overflow: hidden;
        .hot-title{
            display: flex;
            justify-content: space-between;
            align-items:center;
            margin: 0 39px;
            margin-top: 42px;
            .title{
                font-size: 26px;
                color: #333333;
                letter-spacing: 0;
                font-weight: 500;
                height: 37px;
                line-height: 37px;
                margin: 0;
                padding: 0;
            }
        }
        .hot-list{
            width: 672px;
            margin: 28px auto 0;
            .list-item{
                float: left;
                border: 1px solid #E2E2E2;
                padding:12px 19px 10px 23px;
                font-size: 20px;
                color: #666666;
                letter-spacing: 0;
                font-weight: 400;
                height: 50px;
                line-height: 50px;
                margin: 0 10px 12px 0;
            }
            .hot-act{
                float: left;
                border: 1px solid #E2E2E2;
                padding:12px 19px 10px 23px;
                font-size: 20px;
                letter-spacing: 0;
                font-weight: 400;
                height: 50px;
                line-height: 50px;
                margin: 0 10px 12px 0;
                color:  #9F0606;
            }
        }
    }
    .tips{
        overflow: hidden;
    }
    .tips-list{
        overflow: hidden;
    }
    .tips-title{
        margin-left:52px;
        height: 93px;
        font-size: 26px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 400;
        line-height:93px;
        padding: 0;
        text-align: left;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .go-icon{
        
        margin-right: 52px;
        width: 26px;
        height: 26px;
    }
    .tip-br{
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    .goodShow{
        //display: flex;
        //justify-content: space-evenly;
        .goodShow-title{
            .active{
                color: #CEA62A;
            }
        }
    }
    .goods{
        //display: flex;
        width: 710px;
        margin: 0 auto;
        overflow: hidden;
    }
    .goods-item{
        //display: flex;
        width: 350px;
        float: left;
    }
    .goods-img{
        
        width: 350px;
        height: 339px;
    }
</style>